<template>
 
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <img
        style="width: 100px"
        src="/vite.svg"
        alt="Element logo"
      />
    </el-menu-item>
    <el-menu-item index="1"><router-link to="/goodslist">商品列表</router-link></el-menu-item>
    <el-menu-item index="2"><router-link to="/cart">我的购物车</router-link></el-menu-item>
    <el-menu-item index="3"><router-link to="/chart">购物车图表</router-link></el-menu-item>
    <el-sub-menu index="4">
      <template #title >登录人：<el-tag type="success" v-if="user.username!='未登录'">{{user.username}}</el-tag><el-tag type="danger" v-else>未登录</el-tag></template>
      <el-menu-item index="4-1">注册登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup>

import { computed } from 'vue';
import { useStore } from 'vuex';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  if(key=='4-1')router.push("/login")
}
const store=useStore()
const user=computed(()=>store.getters.getUser)
</script>
<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(4) {
  margin-right: auto;
}
.tabmenu {
  position: absolute;
  top: 2px;
  margin: 0;
}

.tabmenu li {
  display: inline-block;
}

.tabmenu li a {
  display: block;
  padding: 5px 10px;
  margin: 0 10px 0 0;
  border: 1px solid #91a7b4;
  border-radius: 5px 5px 0 0;
  background: #e3f1f8;
  color: #333;
  text-decoration: none;
}

.tablist {
  position: relative;
  /* margin: 50px auto; */
  /* top: 60px; */
  min-height: 50px;
}

.tab_content {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 600px;
  padding: 15px;
  border: 1px solid #91a7b4;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  font-size: 1.2em;
  line-height: 1.5em;
  color: #666;
  background: #fff;
}
.user{
  float: right;
}
</style>
